<template>
    <b-container fluid class="p-5 mt-4">
        <div class="mavonEditor">
            <no-ssr>
            <mavon-editor :toolbars="markdownOption" v-model="handbook" :language="lang"/>
            </no-ssr>
        </div>
    </b-container>
</template>
 
<script>
    export default {
        name: 'blogCreate',
        data() {
            return {
                lang: 'ja',
                markdownOption: {
                    bold: true, // 粗体
                    italic: true, // 斜体
                    underline: true, // 下划线
                    quote: true, // 引用
                    ol: true, // 有序列表
                    ul: true, // 无序列表
                    link: true, // 链接
                    imagelink: true, // 图片链接
                    code: true, // code
                    table: true, // 表格
                    fullscreen: true, // 全屏编辑
                    readmodel: true, // 沉浸式阅读
                    htmlcode: true, // 展示html源码
                    help: true, // 帮助

                    undo: true, // 上一步
                    redo: true, // 下一步
                    trash: true, // 清空
                    save: true, // 保存（触发events中的save事件）
                    /* 1.4.2 */
                    navigation: true, // 导航目录
                    /* 2.1.8 */
                    alignleft: true, // 左对齐
                    aligncenter: true, // 居中
                    alignright: true, // 右对齐
                    /* 2.2.1 */
                    subfield: true, // 单双栏模式
                    preview: true, // 预览
                },
                handbook: ""
            }
        },
        methods: {
        },

    }       
</script>

<style  scoped>
.mavonEditor {
    width: 100%;
    height: 100vh;
}
</style>